<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
         <el-form-item label="ID" prop="id">
          <el-input v-model="query.id" name="id" clearable />
        </el-form-item>
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="query.name" name="name" clearable />
        </el-form-item>
        <el-form-item label="套餐标识" prop="identifying">
          <el-input v-model="query.identifying" name="identifying" clearable />
        </el-form-item>
      </template>
      </Search>
      <div class="table-default">
        <Operate :show="open" v-if="isAdmin == 'true' || isAdmins == 'managger'" />
        <el-table :data="tableData" class="mt-3" v-loading="loading" >
          <!-- <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <h3>地址拦截</h3>
                <el-table :data="props.row.family" border="true">
                  <el-table-column label="Name" prop="name" />
                  <el-table-column label="State" prop="state" />
                  <el-table-column label="City" prop="city" />
                  <el-table-column label="Address" prop="address" />
                  <el-table-column label="Zip" prop="zip" />
                </el-table>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="id" label="ID" align="center" />
          <el-table-column prop="name" label="套餐名称" align="center"  />
          <el-table-column prop="mini_text" label="套餐简介" align="center"   />
          <el-table-column prop="price" label="套餐价格" align="center"   />
          <!-- <el-table-column prop="head_img" label="套餐头图"  align="center"  /> -->
          <el-table-column prop="operator_id" label="运营商"  align="center"  />
          <el-table-column prop="out_package_id" label="外部套餐编码"  align="center"  />
          <el-table-column prop="weights" label="权重" align="center"   />
          <el-table-column prop="my_title" label="自定义标题"  align="center"  />
          <el-table-column prop="color" label="自定义背景色"  align="center"  />
          <el-table-column prop="uporlocal" label="号库"  align="center"  >
            <template #default="scope">
              <div v-if="scope.row.uporlocal == 1">
                无
              </div>
              <div v-if="scope.row.uporlocal == 2">
                本地
              </div>
              <div v-if="scope.row.uporlocal == 3">
                线上
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column v-if="isAdmin == 'true' || isAdmins == 'managger'" prop="status" label="是否开启套餐" align="center">
              <template #default="scope">
                <Package-Status v-model="scope.row.status" :id="scope.row.id" :api="api" name="status" />
              </template>
          </el-table-column> -->
          <el-table-column v-if="isAdmin == 'true' || isAdmins == 'managger'" prop="select_status" label="是否开启选号" align="center">
              <template #default="scope">
                <Package-Status v-model="scope.row.select_status" :id="scope.row.id" :api="api" name="select_status" />
              </template>
          </el-table-column>
          <el-table-column v-if="isAdmin == 'true' || isAdmins == 'managger'" prop="direct_send_status" label="直接提交给局方" align="center">
              <template #default="scope">
                <Package-Status v-model="scope.row.direct_send_status" :id="scope.row.id" :api="api" name="direct_send_status" />
              </template>
          </el-table-column>
          <el-table-column v-if="isAdmin == 'true' || isAdmins == 'managger'" prop="is_upload" label="上架" align="center">
              <template #default="scope">
                <Package-Status v-model="scope.row.is_upload" :id="scope.row.id" :api="api" name="is_upload" />
              </template>
            </el-table-column>
          <el-table-column v-if="isAdmin == 'true' || isAdmins == 'managger'" label="操作" align="center" width="480">
            <template #default="scope">
              <el-button @click="notification(scope.row.id)" type="success" plain size="small">  <el-icon size="15" style="padding-right: 2px;padding-bottom: 1px;"><DocumentAdd /></el-icon> 通知栏填充</el-button>
              <el-button @click="comment(scope.row.id)" type="success" plain size="small">  <el-icon size="15" style="padding-right: 2px;padding-bottom: 1px;"><DocumentAdd /></el-icon> 评论填充</el-button>
              <Update @click="open(scope.row.id)" />
              <Destroy @click="destroy(api, scope.row.id)" />
              <Share @click="share(scope.row.id)"/>
            </template>
          </el-table-column>
          <el-table-column v-if="isAdmin == 'false'&&  isAdmins != 'managger'" label="操作" align="center" width="120" >
            <template #default="scope">
              <Share @click="share(scope.row.id)"/>
            </template>
          </el-table-column>
        </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
    <Dialog 
      v-model="dialogVisible"
      title="分享链接"
      :close-on-click-modal="false"
      style="padding-bottom: 60px;"
    >
      <div>
        <el-row :gutter="20">
          <el-col :span="21">
            <p id="sharetext">{{ shareText }}</p>
          </el-col>
          <el-col :span="3">
            <el-button style="" type="primary" @click="copyUrl">复制</el-button>
          </el-col>
        </el-row>
        <div class="demo-image__preview">
          <el-image
            style="width: 150px; height: 150px"
            :src="url"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="0"
            :preview-src-list="srcList"
            fit="cover"
          />
        </div>
      </div>
      
      
    </Dialog >
    <Dialog 
      v-model="commentVisible"
      title="评论填充"
      :close-on-click-modal="false"
      style="padding-bottom: 60px;"
    >
      <div>
        <el-form :model="commentData" label-width="120px" ref="comForm" v-loading="loading" class="pr-4">
          
          <div class="word_type" v-for="(domain, index) in commentData.domains" :key="index">
            <el-form-item label="姓名" :prop="'domains.' + index + '.name'"  :rules="[{required: true,message: '姓名必填'}]" >
              <el-input v-model="domain.name" name="name" clearable />
            </el-form-item>
            <el-form-item label="评论内容" :prop="'domains.' + index + '.title'"  :rules="[{required: true,message: '评论内容必填'}]" >
              <el-input v-model="domain.title" name="title" clearable />
            </el-form-item>
            <div style="margin-left: 30px;">
              <el-button type="" @click="removeDomain(domain)">删除</el-button>
            </div>
          </div>
          
          <div  class="addType"  >
            <el-button type="" @click="addDomain">添加</el-button>
          </div>
          
          <div class="flex justify-end" style="margin-top: 50px;">
            <el-button type="primary" @click="commentForm(comForm)">{{ $t('system.confirm') }}</el-button>
          </div>
        </el-form>
      </div>
    </Dialog >
    <Dialog 
      v-model="notificationVisible"
      title="通知栏填充"
      :close-on-click-modal="false"
      style="padding-bottom: 60px;"
    >
      <div>
        <el-form :model="notificationData" label-width="120px" ref="notForm" v-loading="loading" class="pr-4">
          
          <div class="word_type" v-for="(domain, index) in notificationData.domains" :key="index">
            <el-form-item label="姓名" :prop="'domains.' + index + '.name'"  :rules="[{required: true,message: '姓名必填'}]" >
              <el-input v-model="domain.name" name="name" clearable />
            </el-form-item>
            <el-form-item label="评论内容" :prop="'domains.' + index + '.title'"  :rules="[{required: true,message: '评论内容必填'}]" >
              <el-input v-model="domain.title" name="title" clearable />
            </el-form-item>
            <div style="margin-left: 30px;">
              <el-button type="" @click="removeNotDomain(domain)">删除</el-button>
            </div>
          </div>
          
          <div  class="addType"  >
            <el-button type="" @click="addNotDomain">添加</el-button>
          </div>
          
          <div class="flex justify-end" style="margin-top: 50px;">
            <el-button type="primary" @click="notificationForm(notForm)">{{ $t('system.confirm') }}</el-button>
          </div>
        </el-form>
      </div>
    </Dialog >

  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted , ref , reactive } from 'vue'
import Create from './create.vue'
import { useGetList } from '@/composables/curd/useGetList'
import { useDestroy } from '@/composables/curd/useDestroy'
import { useOpen } from '@/composables/curd/useOpen'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElDialog, ElButton, ElPopover } from 'element-plus';
import http from '@/support/http'
import Message from '@/support/message'
 import { DocumentAdd } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import { Code } from '@/enum/app'
//  import Message from '@/support/message'

const api = 'package/package'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)
const dialogVisible = ref(false);
const shareText  = ref('')
const shareCopyId = ref('')
const isAdmin = ref() 
const isAdmins = ref() 
const url = ref()
const srcList = ref([])
const share = (val) => {
  shareCopyId.value = val
  http.get('/package/package/share_url/' + val).then(res => {
    if(res.data.code == 10000){
      shareText.value = res.data.data.url
      url.value = res.data.data.qr_code
      srcList.value = [res.data.data.qr_code]
      dialogVisible.value = true;
    }else{
      Message.error(res.data.message)
    }
  })
}

// 评论填充
const commentVisible = ref(false)
const commentId = ref()
const comment = (id) => {
  commentId.value = id
  http.get('package/package/' + id).then(r => {
    if(r.data.data.comment){
      let querydata = JSON.parse(r.data.data.comment) 
      commentData.domains = querydata.map(item => ({ name:item.name.toString(),title: item.title.toString() }));
      commentVisible.value = true
    }else{
      commentData.domains = [{name:'',title: ''}]
      commentVisible.value = true
    }
  })
}

const comForm = ref<FormInstance>()
const commentData = reactive<{
  domains: DomainItem[]
}>({
  domains: [
    {
      name:'',
      title: ''
    },
  ],
})
interface DomainItem {
  name: string
  title: string
}
const removeDomain = (item: DomainItem) => {
  const index = commentData.domains.indexOf(item)
  if (index !== -1) {
    commentData.domains.splice(index, 1)
  }
}
const addDomain = () => {
  commentData.domains.push({
    name:'',
    title: ''
  })
}
const commentForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl
      .validate(valid => {
        if (valid) {
          http.put('package/package/' + commentId.value,{comment:commentData.domains}).then(r => {
              if (r.data.code === Code.SUCCESS) {
                Message.success(r.data.message)
                commentVisible.value = false
              } else {
                Message.error(r.data.message)
              }
          })
        } else {
          loading.value = false
        }
      })
      .then(() => {})
}

// 通知栏填充
const notificationVisible = ref(false)
const notificationId = ref()
const notification = (id) => {
  notificationId.value = id
  http.get('package/package/' + id).then(r => {
    if(r.data.data.info){
      let querydata = JSON.parse(r.data.data.info) 
      notificationData.domains = querydata.map(item => ({ name:item.name.toString(),title: item.title.toString() }));
      notificationVisible.value = true
    }else{
      notificationData.domains = [{name:'',title: ''}]
      notificationVisible.value = true
    }
  })
}

const notForm = ref<FormInstance>()
const notificationData = reactive<{
  domains: DomainItem[]
}>({
  domains: [
    {
      name:'',
      title: ''
    },
  ],
})
interface DomainItem {
  name: string
  title: string
}
const removeNotDomain = (item: DomainItem) => {
  const index = notificationData.domains.indexOf(item)
  if (index !== -1) {
    notificationData.domains.splice(index, 1)
  }
}
const addNotDomain = () => {
  notificationData.domains.push({
    name:'',
    title: ''
  })
}
const notificationForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl
      .validate(valid => {
        if (valid) {
          http.put('package/package/' + notificationId.value,{info:notificationData.domains}).then(r => {
              if (r.data.code === Code.SUCCESS) {
                Message.success(r.data.message)
                notificationVisible.value = false
              } else {
                Message.error(r.data.message)
              }
          })
        } else {
          loading.value = false
        }
      })
      .then(() => {})
}


// 复制
const copyUrl = () => {
    let createRange = document.createRange()
    createRange.selectNodeContents(document.getElementById('sharetext'))
    const selection = document.getSelection()
    selection.removeAllRanges()
    selection.addRange(createRange)
    document.execCommand('Copy')
    selection.removeAllRanges()
    alert('已复制')
}

onMounted(() => {
  search()
  deleted(reset)
  http.get('user/me').then(res => {
    isAdmins.value = res.data.data.roles[0].identify
  })
  http.get('user/is_admin').then(res => {
    isAdmin.value = res.data.data
  })
})
</script>
<style scoped>
/deep/.el-message-box{
  width: 500px !important;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.demo-image__preview{
  margin: 0 auto;
  text-align: center;
  padding-top: 15px;
}
.word_type{
  display: flex;
}
.addType{
  padding-left: 50px;
  position: relative; 
  top: 0;
}
</style>